<template>
  <div class="page-header-index-wide">
    <div v-has="'role:dl'">
      <h1  style="font-size: 40PX; display: flex;justify-content: center;align-items: center">首页统计功能暂未开放,敬请期待</h1>
    </div>
    <a-row :gutter="24"  v-has="'role:fdl'">
      <a-col :sm="24" :md="12" :xl="5" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="平台会员总数" :total="data.ztotal">
          <template slot="footer">当日新增数：<span>{{ todaytotal }}</span></template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="5" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="平台代理总数" :total="data.dltotal">
          <template slot="footer">当日新增数：<span>{{ todaydltotal }}</span></template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="代理推广员总数" :total="data.tgtotal">
          <template slot="footer">当日新增数：<span>{{ todaytgtotal }}</span></template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="5" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="平台推广员总数" :total="data.pttotal">
          <template slot="footer">当日新增数：<span>{{ todaypttotal }}</span></template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="5" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="平台总收益" :total="data.sytotal">
          <template slot="footer">当日新增数：<span>{{ todaysytotal }}</span></template>
        </chart-card>
      </a-col>
    </a-row>

    <a-row :gutter="24"  v-has="'role:fdl'">
      <a-col :sm="24" :md="12" :xl="30" :style="{ marginBottom: '24px' }">
        <a-card :bordered="false">
          <bar class="statistic" title="王者荣耀各类门票销售额" :dataSource="countSalesWZRY" />
        </a-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="30" :style="{ marginBottom: '24px' }">
        <a-card :bordered="false">
          <bar class="statistic" title="和平精英各类门票销售额" :dataSource="countSalesHPJY" />
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="24"  v-has="'role:fdl'">
      <a-col :sm="24" :md="16" :xl="30" :style="{ marginBottom: '24px' }">
        <a-card :bordered="false">
          <a-radio-group style="display: flex;flex-direction:row;justify-content: left;" @change="statisticst">
            <a-radio-button value="year">按年统计</a-radio-button>
            <a-radio-button value="month">按月统计</a-radio-button>
            <a-radio-button value="day">按日统计</a-radio-button>
          </a-radio-group>
          <br/><br/><br/>
          <bar class="statistic" title="平台收益统计" :dataSource="countSource" :height="400"/>
        </a-card>
      </a-col>

      <a-col :sm="24" :md="8" :xl="30" :style="{ marginBottom: '24px' }">
        <a-card :bordered="false">
          <rank-list title="代理收益排行榜" :list="dlSourceList" style="width: 500px;margin: 0 auto;"/>
        </a-card>
      </a-col>
    </a-row>


  </div>
</template>

<script>
  import {getLoginfo} from '@/api/api'
  import {getAction} from '@/api/manage'
  import ChartCard from '@/components/ChartCard'
  import Bar from '@/components/chart/Bar'
  import RankList from '@/components/chart/RankList'


  export default {
    name: "Analysis",
    components: {
      ChartCard,Bar,RankList
    },
    data() {
      return {
        dlSourceList: [],
        countSalesWZRY:[],
        countSalesHPJY:[],
        data:{},
        todaytotal:0,
        todaydltotal:0,
        todaytgtotal:0,
        todaypttotal:0,
        todaysytotal:0,

        // 数据集
        countSource: [],
        // 柱状图
        url: {
          getCountInfo: "/gameuser/gameUser/getCountInfo",
          /*getYearCountInfo: "/gameuser/gameUser/getYearCountInfo",
          getMonthCountInfo:"/gameuser/gameUser/getMonthCountInfo",
          getDayCountInfo:"/gameuser/gameUser/getDayCountInfo",*/
        },
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 50000)
      this.initLogInfo();
      //let url = this.url.getYearCountInfo;
      this.loadDate(this.url.getCountInfo,'year');
    },
    methods: {
      initLogInfo() {
        getLoginfo(null).then((res)=>{
          if(res.success){
            this.loginfo = res.result;
          }
        })

        //客户标签数据
        getAction( "/gameuser/gameUser/selectDataTotal").then((res) => {
          if (res.success) {
            //console.log(res.result.registerUserCountApp);
            this.data = res.result;
            this.todaytotal= res.result.todaytotal;
            this.todaydltotal= res.result.todaydltotal;
            this.todaytgtotal= res.result.todaytgtotal;
            this.todaypttotal= res.result.todaypttotal;
            this.todaysytotal= res.result.todaysytotal;
          }
        })

        //王者荣耀,和平精英-各类门票销售额
        getAction( "/gameuser/gameUser/getCountSales").then((res) => {
          if (res.success) {
            this.getCountSalesWZRY(res.result.wzry)
            this.getCountSalesHPJY(res.result.hpjy)
          }
        })

        //代理收益排行榜
        getAction( "/gameuser/gameUser/getDLRank").then((res) => {
          if (res.success) {
            this.getDLRank(res.result)
          }
        })

      },

      //王者荣耀-各类门票销售额
      getCountSalesWZRY(data){
        if(data.length == 0){
          this.countSalesWZRY.push({
            x: ``,
            y: 0
          })
        }else{
          for (let i = 0; i < data.length; i++){
            this.countSalesWZRY.push({
              x: `${data[i].item}`,
              y: data[i].count
            })
          }
        }
      },

      //王者荣耀-各类门票销售额
      getCountSalesHPJY(data){
        if(data.length == 0){
          this.countSalesHPJY.push({
            x: ``,
            y: 0
          })
        }else{
          for (let i = 0; i < data.length; i++){
            this.countSalesHPJY.push({
              x: `${data[i].item}`,
              y: data[i].count
            })
          }
        }
      },

      //排行榜
      getDLRank(data){
        if(data.length == 0){
          this.dlSourceList.push({
            name: ``,
            total: 0
          })
        }else{
          for (let i = 0; i < data.length; i++){
            this.dlSourceList.push({
              name: `${data[i].item}`,
              total: data[i].count
            })
          }
        }
      },

/*========================================================恶心的年月日统计================================================================*/
      loadDate(url,type) {
        getAction(url,{ type : type },'get').then((res) => {
          if (res.success) {
            this.countSource = [];
            if(type === 'year'){
              this.getYearCountSource(res.result);
            }
            if(type === 'month'){
              this.getMonthCountSource(res.result);
            }
            if(type === 'day'){
              this.getDayCountSource(res.result);
            }
          }else{
            var that=this;
            that.$message.warning(res.message);
          }
        })
      },

      statisticst(e){
        this.loadDate(this.url.getCountInfo,e.target.value);

        //this.getUrl(e.target.value);
      },

      // 选择请求url
      /*getUrl(type){
        console.log(type)
        let url = "";
        if(type === 'year'){
          url = this.url.getYearCountInfo;
        }
        if(type === 'month'){
          url = this.url.getMonthCountInfo;
        }
        if(type === 'day'){
          url = this.url.getDayCountInfo;
        }

        this.loadDate(url,type);
      },*/

      getYearCountSource(data){
        for (let i = 0; i < data.length; i++) {
          if(data.length == 0){
            this.countSource.push({
              x: ``,
              y: 0
            })
          }else{
            this.countSource.push({
              x: `${data[i].yearDate}年`,
              y: data[i].yearcount
            })
          }
        }
      },
      getMonthCountSource(data){
        for (let i = 0; i < data.length; i++) {
          if(data.length == 0){
            this.countSource.push({
              x: ``,
              y: 0
            })
          }else{
            this.countSource.push({
              x: `${data[i].monthDate}月`,
              y: data[i].monthcount
            })
          }
        }
      },
      getDayCountSource(data){
        for (let i = 0; i < data.length; i++) {
          if(data.length == 0){
            this.countSource.push({
              x: ``,
              y: 0
            })
          }else{
            this.countSource.push({
              x: `${data[i].dayDate}`+"",
              y: data[i].daycount
            })
          }
        }
      },

    }
  }
</script>